<template>
    <div class="box">
        <div class="intro">
            <div class="pic"><img :src='infoArtist.picUrl' alt=""></div>
            <div id="intro">
                <h1 class="title">{{infoArtist.name}}</h1>
                <div class="detailBox">
                    <div class="name">{{infoArtist.name}}</div>
                    <div class="detail">{{infoArtist.briefDesc}}</div>
                    <el-button class="more" type="text" @click="moreInfo = true">更多&gt;</el-button>

                  
                </div>
                <div class="other">
                    <div class="collect"><i class="iconfont icon-shoucang"></i><span>收藏</span></div>
                </div>
            </div>
            <el-dialog :title="infoArtist.name" :visible.sync="moreInfo" class="intro-pop">
                    {{infoArtist.briefDesc}}
            </el-dialog>
        </div>

        <div class="songTitle">
            <h1>作品</h1>
            <p @click="() => this.toggleName = 'music'" :class="{active: this.toggleName == 'music'}">热门歌曲{{total}}</p>
            <p @click="() => this.toggleName = 'ablum'" :class="{active: this.toggleName == 'ablum'}">专辑{{info.albumTotal}}</p>
        </div>
        <div :is="toggleName" :toSongs ="info.hotSongs" > </div>
    </div>
</template>

<script>
import music from '../components/music.vue'
import ablum from '../components/ablum.vue'
export default {
     components: {music,ablum},
    data() {
        return {
            info: '',
            total: '',
            pageSize: 50,
            toggleName: 'music',
            infoArtist : '',
            moreInfo : false
        }
    },
    beforeRouteEnter (to, from, next) {
        next((vm) => {
            vm.getInfo(to.params.id)
            vm.getSong(to.params.id)
            vm.$router.push(`/singer/${vm.$route.params.id}`)
        })
    },
    beforeRouteUpdate (to, from, next) {
        this.getInfo(this.$route.params.id)
        this.getSong(this.$route.params.id)
        next()
    },
    methods: {
        getInfo(id){
            this.axios.get(`https://autumnfish.cn/artists?id=${id}`).then((res) => {
                //  此接口包含歌手简单信息 以及热门歌曲
                this.info = res.data
                this.infoArtist = res.data.artist

            })
        },
        getSong(id){
            this.axios.get(`https://music.taihe.com/v1/artist/song?artistCode=${id}`).then((res) => {
                this.total = res.data.data.total
            })
        }
    },
}
</script>

<style scoped>
    .intro-pop{
      
    padding: 48px 0;
 
    }
    .intro-pop>>> .el-dialog__title {
    font-size: 28px;
}

.intro-pop>>> .el-dialog__body {
    padding: 20px 20px;
    line-height: 26px;
}
    .box{
        width: 80vw;
        margin: 30px auto;
    }
    .intro{
        display: flex;
        justify-content: space-between;
    }
    .intro .pic img{
        width: 270px;
        height: 270px;
        border-radius: 50%;
    }
    #intro{
        width: 58vw;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    #intro .name{
        color: #909399;
    }
    .detailBox{
        position: relative;
    }
    .detailBox .more{
        text-decoration: none;
        position: absolute;
        right: 42px;
        top: 20%;
        color: red;
        font-size: 16px;
    }
    #intro .detail{
        font-size: 14px;
        width: 48vw;
        color: #909399;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    #intro .desc{
        color: #606266;
        padding: 16px 0 24px 0;
    }
    #intro .category span{
        color: red;
        margin-right: 10px;
    }
    .other .collect{
        width: 60px;
        background-color: #f8f8f8;
        padding: 10px 26px;
        border-radius: 20px;
        margin-right: 20px;
    }
    .other .collect i{
        margin-right: 6px;
        font-size: 20px;
    }
    .other .collect span{
        color: #606266;
        cursor: pointer;
    }

    .songTitle{
        display: flex;
        align-items: center;
        padding: 50px 0 30px 0;
    }
    .songTitle h1{
        font-weight: normal;
    }
    .songTitle p{
        margin-left: 50px;
        font-weight: 500;
        cursor: pointer;
        padding-bottom: 6px;
        margin-top: 6px;
    }
    .songTitle p.active{
        border-bottom: 1px solid #000;
    }
</style>